<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="all">
    <meta name="author" content="Tencent-CP">
    <meta name="Copyright" content="Tencent">
    <meta name="description"
          content=""/>
    <meta name="keywords"
          content=""/>
    <title>英雄</title>
    <link rel="stylesheet" type="text/css" href="Public/Static/Lol/css/index.css"/>
    <link rel="stylesheet" href="Public/Plug/layui/css/layui.css"   media="all">
    <style>
        .main{
            width: 100%;
            margin-bottom: 10px; }
        li.active img{
            border: 4px solid red;
        }
        #hero-list li{
            width: 80px;
            height: 80px;
            border: 1px solid black;
        }

    </style>
</head>
<body style="background: #fff;">
<blockquote class="layui-elem-quote">
    <div class="test-table-reload-btn" style="margin-bottom: 10px;">
        搜索名称：
        <div class="layui-inline">
            <input class="layui-input" name="miniKeywords" value="">
        </div>
        <button class="layui-btn btn-search-form" data-type="button">搜索</button>
        <button class="layui-btn layui-btn-primary hero-add">添加英雄</button>
        <button class="layui-btn layui-btn-primary hero-mini-add">添加英雄所属</button>
        <button class="layui-btn layui-btn-primary hero-type-add">添加英雄类型</button>
    </div>
</blockquote>
{if !empty($mini)}
<div class="main">
    <div id="mini-btn-search" style="margin-bottom: 20px;">

        {foreach $mini as $val}
        <button type="button" data-value="{$val.id}" class="action-mini layui-btn">{$val.name}</button>
        {/foreach}

    </div>
    <blockquote class="layui-elem-quote">
        <div class="test-table-reload-btn" style="margin-bottom: 10px;">
            搜索英雄名称：
            <div class="layui-inline">
                <input class="layui-input" name="keywords" value="">
                <input type="hidden" name="miniId" id="heroMiniId">
            </div>
            <button class="layui-btn btn-search-form-hero" data-type="button">搜索</button>

        </div>
    </blockquote>
    <ul class="top" id="hero-list">

    </ul>

    <div class="status status2 hero-form-edit" style="display: block;">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        </fieldset>
        <form id="hero-form" class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">英雄ID</label>
                    <div class="layui-input-inline">
                        <span name="heroIdShow" class="layui-input"></span>
                        <input type="hidden" name="heroId" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">英雄名称</label>
                    <div class="layui-input-inline">
                        <input  name="name" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="image">更换图标</button>
                <div class="layui-upload-list">
                    <img id="image-path" style="height: 70px;width: 70px;" class="layui-upload-img" src="">
                    <input type="hidden" name="imagePath" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">英雄类型</label>
                <div class="layui-input-inline">
                    <select name="typeId">
                        <option value="">下拉选择英雄类型</option>
                        {foreach $type as $val}
                        <option value="{$val.id}" >{$val.name}</option>
                        {/foreach}


                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">英雄所属</label>
                <div class="layui-input-inline">
                    <select name="miniId">
                        <option value="">下拉选择英雄所属</option>
                        {foreach $mini as $val}
                        <option value="{$val.id}" >{$val.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">英雄形态</label>
                <div class="layui-input-inline">
                    <select name="shape">
                        <option value="">下拉选择英雄形态</option>
                        {foreach $shape as $key=>$val}
                        <option value="{$key}">{$val}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">英雄品质</label>
                <div class="layui-input-inline">
                    <select name="quality">
                        <option value="">下拉选择英雄品质</option>
                        {foreach $quality as $key=>$val}
                        <option value="{$key}">{$val}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">星级</label>
                    <div class="layui-input-inline">
                        <input type="number" name="star"  class="layui-input">
                    </div>
                </div>
            </div>
<!--            <button type="button" class="action-to-update layui-btn layui-btn-normal" style="margin-left: 110px;">编辑</button>-->
            <button type="button" class="action-to-submit layui-btn layui-btn-normal" style="margin-left: 110px;/* display: none*/">保存</button>
            <button type="button" class="action-to-delete layui-btn layui-btn-danger" style="margin-left: 110px;">删除</button>


        </form>
    </div>
</div>

{else}
<h2>暂无数据</h2>
{/if}
<!--添加英雄所属-->
<form class="layui-form hero-mini-form" action="" style="display: none;margin-top: 30px;">
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="hero-mini-filter">保存</button>
        </div>
    </div>
</form>
<!--添加英雄类型-->
<form class="layui-form hero-type-form" action="" style="display: none;margin-top: 30px;">
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="hero-type-filter">保存</button>
        </div>
    </div>
</form>
<!--添加英雄-->
<form class="layui-form hero-add-form" action="" style="display: none;margin-top: 30px;">
    <div class="layui-form-item">
        <label class="layui-form-label">英雄ID</label>
        <div class="layui-input-block">
            <input type="number" name="heroId" lay-verify="required" placeholder="请输入英雄ID" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">英雄名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="请输入英雄名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-upload">
            <label class="layui-form-label">
                <button type="button" class="layui-btn" id="heroImg">更换图标</button>
            </label>
            <div class="layui-input-block">
                <div class="layui-upload-list">
                    <img id="add-image-path" style="height: 70px;width: 70px;" class="layui-upload-img" src="">
                    <input type="hidden" name="imagePath" value="">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">英雄类型</label>
        <div class="layui-input-block">
            <select name="typeId" lay-verify="required">
                <option value="">下拉选择英雄类型</option>
                {foreach $type as $val}
                <option value="{$val.id}" >{$val.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">英雄所属</label>
        <div class="layui-input-block">
            <select name="miniId" lay-verify="required">
                <option value="">下拉选择英雄所属</option>
                {foreach $mini as $val}
                <option value="{$val.id}" >{$val.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">英雄形态</label>
        <div class="layui-input-block">
            <select name="shape">
                <option value="">下拉选择英雄形态</option>
                {foreach $shape as $key=>$val}
                <option value="{$key}">{$val}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">英雄品质</label>
        <div class="layui-input-block">
            <select name="quality">
                <option value="">下拉选择英雄品质</option>
                {foreach $quality as $key=>$val}
                <option value="{$key}">{$val}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">星级</label>
        <div class="layui-input-block">
            <input type="number" name="star" lay-verify="required" placeholder="请输入星级" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="hero-filter">保存</button>
        </div>
    </div>
</form>
</body>

<!--引用插件-->
<script type="text/javascript" src="Public/Plug/layui/layui.all.js"></script>
<script type="text/javascript" src="Public/Plug/jquery/jquery-3.3.1.min.js"></script>
<script src="Public/Static/Lol/js/hero.js?v=5"></script>
</html>